Klilknij tu żeby wrócić do wyjaśnienia z-index.

Klocek między nam
(ang. static - statyczny, stały)
nigdzie się nie ruszy

W tym pojemniku, żółty klocek ma position ustawione na "static". Jest to wartość domyślna, nic szczególnego z tym klockiem się nie dzieje. Pozostałe żółte klocki są poprzesuwane. Aby zmienić pozycję elementu można ustalić im inną wartość reguły position, a następnie sterować przesunięciami.

Klocek pomiędzy nami
(ang. sticky - przylepny, klejący się)
lubi się przylepiać do sufitu

W tym pojemniku, żółty klocek ma position ustawione na "sticky". Oznacza to, że "przylepi" się do szczytu ekranu i tam pozostanie przy przewijaniu strony, aż użytkownik nie schowa całego pojemnika, w którym ten klocek się znajduje. Klocek ten posiada także przesunięcie górne ustalone na 10px - w takiej odległości od szczytu strony pozostanie.

Pomiędzy nami powinien być
(ang. absolute - bezwzględny)
klocek z napisem "absolute"

W tym pojemniku, żółty klocek ma position ustawione na "absolute". Oznacza to, że kompletnie ignoruje swoje pierwotne ustawienie (powinien być między dwoma niebieskimi klockami) i ustawia się tam, gdzie ustali się w CSS. Jego pozycję wyraża się przesunięciami: w tym przypadku ma ustawione przesunięcie dolne oraz prawe na 40px.

A pomiędzy nami miał być
(ang. fixed - stały, ustalony, nieruchomy)
klocek z napisem "fixed"

W tym pojemniku, żółty klocek ma position ustawione na "fixed". Oznacza to, że ten klocek ignoruje swoją pierwotną pozycję, a następnie ustawia się w pewnym, stałym miejscu. Pozostanie tam, niezależnie od tego, jak daleko użytkownik się przewinie na stronie - będzie przylepiony na stałe w tej jednej pozycji. Ten element ma przesunięcie górne 100px i prawe 100px.

Nasz sąsiad jest koło nas, tylko lekko się przesunął
(ang. relative - względny)
A w dodatku schował za mną, dzięki z-index: -1

W tym pojemniku, żółty klocek ma position ustawione na "relative". Oznacza to, że lekko ignoruje swoje pierwotne ustawienie i dokłada do niego pewne przesunięcie. Dystans tego przesunięcia jest jednak liczony względem jego orygnalnej pozycji. Ten klocek ma przesunięcie górne i lewe na 30px.

Dzięki stosowaniu różnych ustawień atrybutu "position" można stworzyć elementy o różnym zachowaniu przy przewijaniu się strony. Można także "przyczepić" pewne elementy na stałe w wybrane miejsce. Dodatkowo, "position" pozwala na zastosowanie reguły "z-index", służącej do ustalenia kolejności nawarstwiania się na siebie obiektów.




Reszta tekstu jest tylko wypełniaczem.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus veritatis, maxime nostrum placeat a deleniti officia qui magnam et exercitationem voluptas expedita ab temporibus ex consequuntur odit eos. Maxime, omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla possimus magni perspiciatis pariatur aut ut laborum velit distinctio! Obcaecati a impedit beatae veritatis illo distinctio excepturi molestiae cum aliquam amet.